<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块元素与行内元素（内联元素）</title>
</head>
<body>
    <!-- 
    HTML5出现之前，经常把元素按照块级元素和内联元素来区分。
    在HTML5中，元素不再按照这种方式区分，而是按照内容模块来区分，
    分为元数据型、区块型、标题型、文档流型、语句型、内嵌型、交互型。
    元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，成为混合的

    虽然到了HTML5的版本，元素分类更细致了，但是这对初学者并不友好，
    所以我们依然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用。

    内联元素和块元素的区别
                    块级元素
    块元素会在页面中独占一行（自上向下垂直排列）
            可以设置width,height属性
    一般块级元素可以包含行内元素和其他块级元素
                    内联元素
    行内元素不会独占页面中的一行，只占自身的大小（自左向右垂直排列）
        行内元素设置width,height属性无效
    一般内联元素包含内联元素不包含块级元素

    常见块级元素
    div form h1~h6 hr p table ul 等
    常见内联元素
    a b em i span strong 等
    行内块元素（特点：不换行、能够识别宽高）
    button img input 等
    -->

    <h1>标题</h1>
    <p>这是一个段落</p>
    <ul>
        <li>标题1</li>
        <li>标题2</li>
    </ul>

    <a href="#">超链接</a>
    <span>内容</span>
    <em>注重语气</em>

    <img width="50px" src="../07标签之图片/image/1.jpg" alt="">
</body>
</html>